<template>
<div>
  <!-- <myhead  ref="hdRef" />
  <div>我是app.vue  {{ a }}</div>
  <ct a="1" b="2" :c="456" @abc="fn1" ref="ctRef"/>
  <ft a="3" :b="[1,2,3]" @kfc="fn1" ref="ftRef" />
  <button @click="printCp"> 打印 所有组件实例看看 </button>

  <button @click="showArea=true">选址地址</button>
  <Area @onchange="fn3" :visible="showArea" />

  <hr />

  <div>
    <div>测试activeclass</div>
    <router-link to="/list" active-class="ac"> 列表页 </router-link> <br/>
    <router-link to="/detail/123" active-class="ac"> 内容 </router-link>
  </div> -->
  <!-- vuerouter在 有匹配路径的路由 那么就会在router-view当中渲染出对应的组件 -->
  <router-view />


</div>
</template>

<script>
 //  vue 当中 使用@作为目录 src的别名
 import head from '@/components/head.vue'
 import ft from '@/components/ft.vue'
 import ct from '@/components/ct.vue'

 export default {
    components:{
      myhead: head,
      ft,
      ct
    },  
    data(){
      return {
        a:1,
        showArea:false
      }
    },
    methods:{
      fn1(res){
        console.log('我是appvue当中的fn1',res)
      },
      printCp(){
        console.log('ft组件',this.$refs.ftRef)
        console.log('ct组件',this.$refs.ctRef)
        console.log('hd组件', this.$refs.hdRef)
      },
      fn3(res){
        console.log('用户选中的地址 in app.vue',res)
       
      }
    }
 }

</script>

<style lang="scss">

.ac{
  color: red !important;
  font-weight: 600;
}
</style>


